import React, { Component } from 'react'
import {connect} from 'react-redux'
import {setTodolist,setStatus,deleteTodolist} from '../../store/actions/todoActions'
class Todolist extends Component {
    state = {
        val:''
    }
   

    render() {
        const {val} = this.state
        const {todolist} = this.props
        return (
            <div>
                {/* 输入框 添加未完成事件 */}
                <input type="text" value={val} onChange = {ev => this.setState({val:ev.target.value})}/>
                <div onClick={()=>this.props.getVal.apply(this)}>添加</div>
                {/* 绑定this指向 */}

                {/* 1.  .bind(this)(params1,params2,params3) */}
                {/* 2.  .call(this,params1,params2,params3) */}
                {/* 1.  .apply(this,[params1,params2,params3]) */}

                {/* 未完成事件列表 渲染todolist中状态为1的数据 */}
                <h2>未完成事件列表</h2>
                <div>
                    {
                        todolist.map(item=>{
                            if(item.status === 1){
                                return <div key={item.id}>
                                    {item.txt}
                                    <button onClick={()=>this.props.setListStatus(item.id)}>已完成</button>
                                    <button onClick={()=>this.props.deleteList(item.id)}>删除</button>
                                </div>
                            }
                        
                        })
                    }
                </div>

                 {/* 已完成事件列表 渲染todolist 中状态为2的数据 */}
                 <h2>已完成事件列表</h2>
                 <div>
                    {
                        todolist.map(item=>{
                            if(item.status === 2){
                                return <div key={item.id}>
                                    {item.txt}
                                    <button onClick={()=>this.props.setListStatus(item.id)}>未完成</button>
                                    <button onClick={()=>this.props.deleteList(item.id)}>删除</button>
                                </div>
                            }
                        
                        })
                    }
                </div>


            </div>
        )
    }
}

export default connect(store=>{
    const {todolist} = store.todo
    return {
        todolist
    }
},dispatch=>{
    return{
        getVal(){
            const {val} = this.state;
            this.setState({val:''})
            dispatch(setTodolist(val)) 
        },
        deleteList(id){
            dispatch(deleteTodolist(id)) 
        },
        setListStatus(id){
            dispatch(setStatus(id)) 
        },
        
    }
})(Todolist)
